<template>
<div>
  <div v-if="show" class="check-shop">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-button type="primary" icon="el-icon-plus" size="small" @click="()=>{this.$router.push({name:'addStore', query:{merchant_id: this.$route.query.merchant_num}})}">添加门店</el-button>
    </el-row>
    <el-row>
      <el-table size="small" :data="shopList">
        <el-table-column label="门店ID" prop="id" align="center"></el-table-column>
        <el-table-column label="门店编号" prop="store_number" align="center"></el-table-column>
        <el-table-column label="门店名称" prop="store_name" align="center"></el-table-column>
        <el-table-column label="门店地址" prop="store_address" align="center"></el-table-column>
        <el-table-column label="所属商户" prop="store" align="center"></el-table-column>
        <el-table-column label="二维码" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="right" effect="dark">
              <div slot="content"><img :src="scope.row.qr" alt=""></div>
              <img :src="scope.row.qr" alt="" width="50" height="50">
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="店员" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="to(scope.row.id)">{{ scope.row.staff_number }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="终端">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toTerminal(scope.row.id)">{{ scope.row.terminal_number }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="created_at" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.store_status === 1 ? 'succ' : 'err'">{{ scope.row.store_status === 1 ? '正常' : '未营业'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="warning" @click="edit(scope.row.id)">修改</el-button>
            <el-button type="text" size="small" @click="del(scope.row.id, scope.row.store_name)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="page.total" :current-page.sync="page.currentPage" layout="total, prev, pager, next, jumper"  class="fr mt20" @current-change="handleCurrentChange" :page-size="page.pageSize"></el-pagination>
    </el-row>
  </div>
  <div v-else>
    <router-view></router-view>
  </div>
</div>
</template>

<script>
// 接受父组件传入的权限值 判断是否显示按钮和表格操作
import Breadcrumb from '@/components/Breadcrumb'
import { querystoreInit, querystoreDel, querystorePage } from '@/api/shop'

export default {
  name: 'checkshop',
  components: {
    Breadcrumb
  },
  data() {
    return {
      show: null, // 在data定义一个数据值 在生命周期开始时 利用$this.nextTick()方法修改值 并使用该值渲染页面
      shopList: [],
      page: {
        total: 0,
        pageSize: 0,
        currentPage: 1
      }
    }
  },
  methods: {
    to(id) {
      this.$router.push({ name: 'shopUser', query: { store_id: id }})
    },
    edit(id) {
      this.$router.push({ name: 'editStore', query: { store_id: id }})
    },
    handleCurrentChange(v) {
      querystorePage(this.$route.query.merchant_num, v).then(response => {
        this.shopList = response.data.result.data
        this.page.total = response.data.total
      })
    },
    del(id, name) {
      const model = confirm('是否删除门店' + name)
      if (model) {
        querystoreDel(id).then(response => {
          this.$message.success(response.data.errorMsg)
          if (this.shopList.length === 1) {
            if (this.page.currentPage === 1) {
              this.handleCurrentChange(this.page.currentPage = 1)
              this.shopList = response.data.result.data
            } else {
              this.handleCurrentChange(this.page.currentPage - 1)
              this.shopList = response.data.result.data
              this.page.currentPage === 1 ? this.page.currentPage = 1 : this.page.currentPage -= 1
            }
          } else {
            if (this.page.currentPage === 1) {
              this.handleCurrentChange(this.page.currentPage = 1)
              this.shopList = response.data.result.data
            } else {
              this.handleCurrentChange(this.page.currentPage - 1)
              this.shopList = response.data.result.data
              this.page.currentPage === 1 ? this.page.currentPage = 1 : this.page.currentPage -= 1
            }
          }
        })
      }
    },
    toTerminal(id) {
      this.$router.push({ name: 'terminal', query: { store_id: id }})
    }
  },
  created() {
    this.$nextTick(() => {
      if (this.show) {
        querystoreInit(this.$route.query.merchant_num).then(response => {
          if (response.data.errorCode === 0) {
            this.page.total = response.data.total
            this.shopList = response.data.result.data
            this.page.pageSize = response.data.perPage
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      }
    })
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.$route.name === 'checkShop' ? this.show = true : this.show = false
    })
  }
}
</script>

<style lang="scss" scoped>
.check-shop{
  .el-row{
    padding: 15px 0;
  }
}
</style>
